<template>
  <div class="qaVerify-container common-container">
    <div class="common-top">
      <span class="left">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          class="demo-form-inline"
        >
          <el-form-item label="搜索">
            <el-input
              v-model="formInline.searchVal"
              placeholder="搜索"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <!-- <el-button type="primary" @click="toModify('add')"
        >添加班级类别</el-button
      > -->
    </div>
    <div class="common-bot">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="createUserName" label="发布人"></el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope">
            {{
              scope.row.content.length > 50
                ? scope.row.content.substr(0, 50) + "..."
                : scope.row.content
            }}
            <span
              class="has-sth"
              @click.stop="showSth(scope.row, 'desc')"
              v-if="scope.row.content.length > 50"
              >详情</span
            >
          </template>
        </el-table-column>
        <el-table-column label="发布时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="图片" v-if="false">
          <template slot-scope="scope">
            <span
              @click.stop="showSth(scope.row, 'img')"
              :class="scope.row.images.length ? 'has-sth' : ''"
              >{{ scope.row.images.length ? "有" : "无" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="处理状态">
          <template slot-scope="scope">
            <span :class="scope.row.checkStatus">{{
              checkStatus[scope.row.checkStatus]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              class="span-modify edit"
              @click.stop="doModify('check', scope.row)"
              >处理</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="nowShowSthType == 'img' ? '图片' : '详情'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <template v-if="nowShowSthType == 'img'">
        <el-image v-for="url in sthArr" :key="url" :src="url"></el-image>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
      <template v-if="nowShowSthType == 'desc'">
        <p>{{ desc }}</p>
      </template>
    </el-dialog>
    <!--  -->
    <el-dialog title="处理" :visible.sync="showCheck" width="50%">
      <el-form :model="checkForm" label-width="100px">
        <el-form-item label="处理备注">
          <el-input type="text" v-model="checkForm.handleRemark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCheck">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ManaApi from "@/api/index";
export default {
  name: "Feedback",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      typeOptions:{
        "user":"用户",
        "question":"问答",
        "answer":"评论",
        "teacher":"导师",
        "normal":"App建议",
      },
      showCheck: false,
      formInline: {
        searchVal: "",
      },
      checkForm: {
        handleRemark: "",
        targetId: 0,
      },
      desc: "",
      nowShowSthType: "",
      checkStatus: {
        failed: "未处理",
        success: "已处理",
      },
      sthArr: [],
      dialogVisible: false,
      showPage: false,
      tableData: [],
      limit: 10,
      nowPage: 1,
      totalElement: 0,
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
    dialogVisible(val) {
      if (!val) {
        this.desc = "";
        this.nowShowSthType = "";
      }
    },
    "formInline.searchVal": function (val) {
      this.getData();
    },
    showCheck(val) {
      if (!val) {
        this.checkForm = {
          handleRemark: "",
          targetId: 0,
        };
      }
    },
  },
  methods: {
    submitCheck() {
      this.$confirm("确认此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        ManaApi.feedback.handleFeedback(this.checkForm).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.showCheck = false;
            this.getData();
          }
        });
      });
    },
    showSth(item, type) {
      this.nowShowSthType = type;
      if (type == "img") {
        if (!item.images.length) {
          this.$message.error("暂无图片");
          return;
        }
        let sthArr = [];
        for (let i = 0; i < item.images.length; i++) {
          sthArr.push(item.images[i].url);
        }
        this.sthArr = sthArr;
      } else if (type == "desc") {
        this.desc = item.content;
      }
      this.dialogVisible = true;
    },
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    doModify(type, item) {
      this.checkForm.targetId = item.id;
      this.showCheck = true;
    },
    toModify(type) {
      this.$router.push({ name: "ModifyQa", query: { type } });
    },
    getData() {
      ManaApi.feedback
        .list({
          limit: this.limit,
          page: this.nowPage - 1,
          keyword: this.formInline.searchVal,
        })
        .then((res) => {
          if (res.data) {
            res.data.forEach((item) =>
              item.handleTime == 0
                ? (item.checkStatus = "failed")
                : (item.checkStatus = "success")
            );
            this.tableData = res.data;
            this.totalElement = res.total;
            this.showPage = true;
          }
        });
    },
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  span {
    &:focus {
      outline: none;
      user-select: none;
    }
  }
}
</style>
